<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3.7 媒体查询--基础</title>
    <style>
        /*1. 什么是媒体查询 media query*/
        /*@media screen and (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/

        /*
            2. 为什么需要媒体查询
                一套样式不可能适应各种大小的屏幕
                针对不同的屏幕大小写样式
                让我们的页面在不同大小的屏幕上都能正常显示
        */
        

        /*
            3. 媒体类型
                all(default)
                screen / print / speech
        */
        /*@media (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        /*@media print and (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        

        /*
            4. 媒体查询中的逻辑
                与( and )
                或( , )
                非( not )
        */
        /*@media screen and (min-width: 900px) and (max-width: 1024px) {
            body {
                background-color: red;
            }
        }*/
        /*@media screen and (min-width: 1024px), (max-width: 900px) {
            body {
                background-color: red;
            }
        }
        @media screen and (min-width: 1024px), screen and (max-width: 900px) {
            body {
                background-color: red;
            }
        }*/

        /*@media not screen and (min-width: 900px) and (max-width: 1024px) {
            body {
                background-color: red;
            }
        }*/
        /*@media not screen and (min-width: 1024px), screen and (max-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        

        /*
            5. 媒体特征表达式
                width/max-width/min-width
                -webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
                orientation
                    landscape/portrait

                height
                device-width/device-height
                    screen.width/screen.height
                aspect-ratio 视口的宽高比
        */
        /*@media screen and (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        @media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
</body>
</html>